<template>
	<a-modal :visible="visible" width="640px" title="选择企业" centered destroyOnClose :maskClosable="false" @cancel="cancel" :bodyStyle="{padding: 0}">
		<a-form ref="formRef" class="flex-container-nomal margin-4" :model="modelRef" :rules="formRules" layout="vertical" :label-col="{span: 24}" :wrapper-col="{span: 24}">
			<div class="flex1 auto-y">
				<a-row :gutter="16">
					<a-col :span="24">
						<a-form-item label="选择办理入住的企业" name="enterpriseId">
							<a-select v-model:value="modelRef.enterpriseId" :options="enterpriseList" :field-names="{label: 'enterPriseName', value: 'id'}" placeholder="请选择办理入住的企业" />
						</a-form-item>
					</a-col>
				</a-row>
			</div>
		</a-form>
		<template #footer>
			<a-button @click="cancel">取消</a-button>
			<a-button type="primary" @click="nextStep">下一步</a-button>
		</template>
	</a-modal>
	<!-- 批量入住-->
	<staff-check-in v-model:visible="record.batchCheckIn" :id="modelRef.enterpriseId" :type="2" :info="staffCheckInInfo" @close="closes" />
</template>
<script setup lang="ts">
	import {reactive, ref, watch} from 'vue'
	import {FormInstance, message} from 'ant-design-vue'
	import type {Rule} from 'ant-design-vue/es/form'
	import {enterPriseLibraryQuery} from '@/api/contract'
	import staffCheckIn from '@/components/contract/enterprise-customer-management/staff-check-in.vue'
	const modelRef = reactive<any>({
		enterpriseId: null
	})
	const props = defineProps<{
		visible: boolean
	}>()
	const record = reactive({
		batchCheckIn: false
	})
	const staffCheckInInfo = ref<any>({})
	const formRules: {
		[key: string | number]: any
	} = {
		enterpriseId: [
			{
				required: true,
				message: '请选择办理入住的企业'
			}
		]
	}
	const enterpriseList = ref<any>([])
	const getEnterpriseLibrary = () => {
		enterPriseLibraryQuery({}).then(res => {
			res.data.map(o => {
				enterpriseList.value.push({
					id: o.id,
					enterPriseName: o.enterPriseName,
					linkmanName: o.linkmanName,
					linkmanPhone: o.linkmanPhone
				})
			})
		})
	}
	const formRef = ref<any>()
	const emit = defineEmits(['update:visible', 'success'])
	const cancel = () => {
		enterpriseList.value = []
		emit('update:visible', false)
		formRef.value?.resetFields()
	}
	const closes = () => {
		emit('success')
		cancel()
	}
	const nextStep = () => {
		formRef.value.validate().then(() => {
			staffCheckInInfo.value = enterpriseList.value.find(o => o.id === modelRef.enterpriseId) || {}
			record.batchCheckIn = true
		})
	}
	watch(
		() => props.visible,
		newVal => {
			if (newVal) {
				getEnterpriseLibrary()
			}
		}
	)
</script>
<style>
	.margin-4 {
		margin: 4px;
		height: 200px;
	}
</style>
